/**
 * 活动模块
 */
import React, {Component} from 'react';
import {View, StyleSheet, Text, Image, TouchableOpacity} from  'react-native';
import CommonCell from  './ActivityItem';
import BottomCommonCell from './BottomCommonCell';
let jsonData = require('../../Data/HomeTopMiddleLeft.json');
let jsonData2 = require('../../Data/XMG_Home_D4.json');
let imageData = [require('../../img/tttj.png'), require('../../img/yyms.png')];
let dimension = require('Dimensions');
let mdqg = require('../../img/mdqg.png');
let yyms = require('../../img/yyms.png');
let world = require('../../img/free/world.png');
let {width, height} = dimension.get('window');
export default class Activity extends Component {
    constructor(props) {
        super(props);
        Activity.renderBottom = Activity.renderBottom.bind(this);
    }

    render() {
        return (
            <View style={{backgroundColor:'#e8e8e8',marginTop:15}}>
                <BottomCommonCell leftIcon="star" leftTitle='活动' rightTitle='更多活动' fun={()=>alert("查看更多活动")}/>
                <View style={styles.container}>
                    {Activity.renderLeftView()}
                    <View>
                        {Activity.renderRightView()}
                    </View>
                </View>
                {Activity.renderBottom()}
            </View>
        )
    }

    static renderLeftView() {
        let rightData = jsonData.dataLeft[0];
        return (
            <TouchableOpacity onPress={()=>{alert("asd")}}>
                <View style={styles.leftViewStyle}>
                    <Image source={mdqg} style={styles.leftImageStyle}/>
                    <Image source={yyms} style={styles.leftImageStyle}/>
                    <Text style={{color:'gray'}}>{rightData.title}</Text>
                    <View style={{flexDirection:'row',marginTop:5}}>
                        <Text style={{color:'blue',marginRight:5}}>{rightData.price}</Text>
                        <Text style={{color:'orange',backgroundColor:'yellow'}}>{rightData.sale}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

    static renderRightView() {
        let itemArr = [];
        let rightData = jsonData.dataRight;
        for (let i = 0; i < rightData.length; i++) {
            let data = rightData[i];
            itemArr.push(
                <CommonCell key={i} title={data.title} image={imageData[i]}
                            subTitle={data.subTitle} titleColor={data.titleColor}/>
            )
        }
        return itemArr;
    }

    static renderBottom() {
        return (
            <View>
                <View style={styles.bottomViewStyle}>
                    {this.renderBottom2()}
                </View>
            </View>

        )
    }

    renderBottom2() {
        let itemArr = [];
        let dataArr = jsonData2.data;
        for (let i = 0; i < dataArr.length; i++) {
            let data1 = dataArr[i];
            itemArr.push(
                <CommonCell key={i}
                            title={data1.maintitle}
                            image={imageData[1]}
                            subTitle={data1.deputytitle}
                            titleColor={data1.typeface_color}
                            tplurl={data1.tplurl}
                            callBackClickCell={(url,title)=>this.popToTopView(url,title)}
                />
            )
        }
        return itemArr;
    }

    popToTopView(url,title) {
        this.props.popTopHome(url,title);
    }
}
Activity.propTypes = {
    popTopHome: React.PropTypes.func
};
Activity.defaultProps = {
    popTopHome: null
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent:'space-between'
    },
    leftImageStyle: {
        width: 120,
        height: 30,
        resizeMode: 'contain'
    },
    leftViewStyle: {
        width: (width -1)*0.5,
        height: 119,
        backgroundColor: 'white',
        marginRight: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    bottomViewStyle: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent:'space-between'
    }
});
